<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>章节练习</title>
    <style>
        /* reset */
        html,
        body,
        h2,
        ul,
        li,
        dl,
        dd {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            background-color: #7bb7fa;
            font-size: 16px;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #666;
        }

        /* 必要css */
        .indexed-list h2 {
            background-color: #7bb7fa;
            color: #333;
            line-height: 40px;
            text-indent: 15px;
            font-size: 1.143rem;
            position: sticky;
            top: 0;
        }

        .indexed-list dd {
            line-height: 44px;
            background-color: #7bb7fa;
            padding: 0 15px;
        }

        .indexed-list dd a {
            display: block;
            color: #333;
            border-bottom: 1px solid #ddd;
            cursor: pointer;
        }

        .indexed-list dd:last-child a {
            border-bottom: 0 none;
        }

        .indexed-nav {
            background-color: #7bb7fa;
            position: fixed;
            top: 50%;
            right: 5px;
            z-index: 99;
            color: #cfdbe5;
            font-size: .85rem;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .indexed-nav li {
            padding: 0 4px 2px;
            text-align: center;
        }

        .indexed-nav li.active {
            font-size: 1.143rem;
            color: #22282d;
        }

        #hhb_prompt {
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 10;
            margin: -30px 0 0 -30px;
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
            color: #fff;
            background: rgba(0, 0, 0, .5);
            border-radius: 4px;
        }
    </style>
</head>

<body>
    <!-- wrapper -->
    <div id="list-wrapper">
        <!-- 主列表 -->
        <ul class="indexed-list"> </ul>
        <!-- 右侧导航列表 -->
        <ul class="indexed-nav"></ul>
    </div>

    <!-- js -->
    <script src="js/zepto.min.js"></script>
    <script src="js/indexedList.min.js"></script>
    <script src="js/url.js"></script>

    <script>
        const data = [];
        if (data.length == 0) {
            $.get($.url+"/yj/answer/chapterLists", {}, function (datas) {
                //模拟数据 - Tips: 请按以下格式生成数据
                const data = datas.data
                // const data = [
                //     {
                //         label: 'A',
                //         lists: ['a-1', 'a-2', 'a-3', 'a-4', 'a-5', 'a-6', 'a-7', 'a-8', 'a-9']
                //     },
                //     {
                //         label: 'B',
                //         lists: ['b-1', 'b-2', 'b-3', 'b-4', 'b-5', 'b-6', 'b-7']
                //     },
                //     {
                //         label: 'C',
                //         lists: ['c-1', 'c-2', 'c-3', 'c-4', 'c-5', 'c-6', 'c-7', 'c-8', 'c-9', 'c-10', 'c-11', 'c-12']
                //     },
                //     {
                //         label: 'D',
                //         lists: ['d-1', 'd-2', 'd-3', 'd-4', 'd-5', 'd-6', 'd-7', 'd-8', 'd-9']
                //     },
                //     {
                //         label: 'E',
                //         lists: ['e-1', 'e-2', 'e-3', 'e-4', 'e-5', 'e-6']
                //     },
                //     {
                //         label: 'F',
                //         lists: ['f-1', 'f-2', 'f-3', 'f-4']
                //     }
                // ];

                //调用插件
                $(() => $.indexedList({
                    el: '.indexed-list', //主列表DOM [选填，默认值：.indexed-list]
                    elNav: '.indexed-nav', //右侧列表DOM [选填，默认值：.indexed-nav]
                    datas: data //自定义的数据 [必填，默认为空数组]
                }));

                $(() => $('.indexed-list dd a').click(function (index) {
                    var data = $(this).text().split("(")[0];
                    parent.location.href = "/answer/answer/index.html?data=" + ("chapterTopics/"+data);
                }));
            })
        }

    </script>

</body>

</html>